<template>
  <div class="order-page">
    <nav-bar>订单页面</nav-bar>
    <van-tabs ref="tabs" @click-tab="onChangeTab" class="order-tab">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="已支付"></van-tab>
      <van-tab title="发货"></van-tab>
    </van-tabs>
    <div class="order-list-content">
      <van-pull-refresh
          v-model="state.refreshing"
          @refresh="onRefresh"
          class="order-list-refresh"
      >
        <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
            @offset="10"
        >
          <div
              @click="goTo(item.id)"
              class="order-item-box"
              v-for="(item, index) in state.list"
              :key="index"
          >
            <div class="order-item-header">
                  <span style="line-height: 30px"
                  >订单号：{{ item.order_no }} <br/>
                    创建时间：{{ item.created_at }}</span
                  >
            </div>
            <van-card
                v-for="sub in item.orderDetails.data"
                :key="sub.id"
                :num="sub.num"
                :price="sub.goods.price+'.00'"
                desc="全场包邮"
                :title="sub.goods.title"
                :thumb="sub.goods.cover_url"
            />
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "@/components/common/navbar/NavBar.vue";
import {onMounted} from "vue";
import {getOrderList} from "@/network/order";
import {state} from "@/views/order/state";
import {useRouter} from "vue-router";

const router = useRouter();

function onChangeTab({name}: any) {
  state.status = name;
  onRefresh();
}

function onRefresh() {
  state.refreshing = true;
  state.finished = false;
  state.loading = true;
  state.page = 1;
  onLoad();
}

function onLoad() {
  if (state.refreshing) {
    state.list = [];
    state.refreshing = false;
  } else {
    if (state.page < (state.pagination.total_pages || 1)) {
      state.page = state.page + 1;
    }
  }
  getList();
}

function goTo(id: number) {
  router.push({
    path: "/order/detail",
    query: {id}
  });
}

onMounted(() => {
  getList();
});

function getList() {
  getOrderList({page: state.page, status: state.status, include: state.include}).then((res) => {
    console.log(res);
    state.list.push(...res.data);
    state.pagination = res.meta.pagination;
    state.loading = false;
    if (state.page >= (state.pagination.total_pages || 1)) {
      state.finished = true;
    }
  });
}
</script>

<style lang="scss" scoped>
.order-page {
  margin-top: 48px;
  text-align: left;
  .order-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 10px;
    color: #252525;
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    .order-name {
      font-size: 14px;
    }
  }
  .order-tab {
    position: fixed;
    left: 0;
    z-index: 1000;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
  }

  .order-list-content {
    height: 100vh;
    overflow: hidden;
    overflow-y: scroll;
    padding-top: 30px;
    padding-bottom: 60px;
  }

  .order-list-refresh {
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .van-pull-refresh__head {
      background: #f9f9f9;
    }

    .order-item-box {
      margin: 20px 10px;
      background-color: #fafafa;
      .order-item-header {
        padding: 10px 20px 0 20px;
        display: flex;
        justify-content: space-between;
      }
      .van-card {
        background-color: #ffffff;
        border-radius: 3px;
        margin-top: 10px;
      }
    }
  }
}
</style>